<template>
  <div class="wrap">
    <!-- 筛选条件 -->
    <div class="labelBox">
      <form-title />
      <el-form
        :inline="true"
        :model="params"
        class="pad-nt-20"
        ref="filterForm"
      >
        <el-form-item label="" prop="searchKey">
          <el-input
            v-model="params.searchKey"
            class="large-input"
            placeholder="搜索合伙人名称/负责人/电话"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="区域" prop="region">
          <select-city :cityVal.sync="params.region"></select-city>
        </el-form-item>
        <el-form-item label="所属商户号" prop="merchantNo">
          <el-input
            v-model="params.merchantNo"
            placeholder="请输入商户号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="所属洗车站" prop="stationName">
          <el-input
            v-model="params.stationName"
            placeholder="请输入洗车站"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="设备类型" prop="stationName">
          <el-select
            v-model="params.machineType"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="清水水位" prop="waterState">
          <el-select v-model="params.waterState" placeholder="请选择" clearable>
            <el-option
              v-for="item in waterList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="泡沫水位" prop="foamState">
          <el-select v-model="params.foamState" placeholder="请选择" clearable>
            <el-option
              v-for="item in waterList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联状态" prop="bindState">
          <el-select v-model="params.bindState" placeholder="请选择" clearable>
            <el-option
              v-for="item in linkList"
              :key="item.id"
              :label="item.name"
              :value="item.data"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="workState">
          <el-select v-model="params.workState" placeholder="请选择" clearable>
            <el-option
              v-for="item in workList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="版本号" prop="versionNo">
          <el-select v-model="params.versionNo" placeholder="请选择">
            <el-option
              v-for="item in versionList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="报修反馈" prop="reporteState">
          <el-select v-model="params.reporteState" placeholder="请选择">
            <el-option
              v-for="item in reporteList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="绑定时间" prop="bindTime">
          <el-date-picker
            v-model="params.bindTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            clearable
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleCurrentChange(1)"
            ><i class="el-icon-upload"></i>筛选</el-button
          >
          <el-button type="text" @click="resetForm('filterForm')" class="pl-5"
            ><i class="el-icon-refresh"></i>重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="labelBox pad-a-20">
      <el-row
        class="line36 mb-10 font-bold"
        justify="space-between"
        type="flex"
      >
        <el-col :span="6" class="">
          总设备数：<span class="font-26 pr-20">{{ totalNumber }}</span>
          条件满足数：<span class="font-26">{{ total }}</span>
        </el-col>
        <el-col :span="6" class="form-top-btn">
          <el-button type="primary" @click="addDialogVisible = true"
            >新增洗车机</el-button
          >
          <!-- 关联站点挪至行内操作 -->
          <!-- <el-button type="primary" @click="bindDialogVisible = true"
            >关联站点</el-button
          > -->
        </el-col>
      </el-row>
      <el-table
        border
        :data="machineList"
        ref="multipleTable"
        tooltip-effect="dark"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column type="index" label="序号" />
        <el-table-column prop="machine_Code" label="平台编号">
          <template slot-scope="scope">{{
            scope.row.machine_Code || "—"
          }}</template>
        </el-table-column>
        <el-table-column prop="wash_Machine_Id" label="设备编码" />
        <el-table-column prop="machine_Type" label="设备类型">
          <template slot-scope="scope">{{
            scope.row.machine_Type === "1" ? "自动洗车机" : "自助洗车机"
          }}</template>
        </el-table-column>
        <el-table-column prop="suppliers_Name" label="设备厂家" />
        <el-table-column prop="merchant_Num" label="所属商户号">
          <template slot-scope="scope">{{
            scope.row.merchant_Num || "—"
          }}</template>
        </el-table-column>
        <el-table-column prop="station_Name" label="所属洗车机站">
          <template slot-scope="scope">{{
            scope.row.station_Name || "—"
          }}</template>
        </el-table-column>
        <el-table-column label="清水水位">
          <template>—</template>
        </el-table-column>
        <el-table-column label="泡沫水位">
          <template>—</template>
        </el-table-column>
        <el-table-column prop="cleaner_Status" label="吸尘器">
          <template>—</template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.status | statusFilter }}
          </template>
        </el-table-column>
        <el-table-column prop="softwareVersion" label="软件版本号">
          <template slot-scope="scope">{{
            scope.row.softwareVersion || "—"
          }}</template>
        </el-table-column>
        <!-- <el-table-column label="同步时间" /> -->
        <el-table-column label="报修反馈">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="
                gotoRepairManagement(scope.row.wash_Machine_Id)
              "
              type="text"
              size="small"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="关联状态">
          <template slot-scope="scope">
            {{ scope.row.linkStatus | linkStatusFilter }}
          </template>
        </el-table-column>
        <el-table-column prop="machine_Code" label="设备码">
          <template slot-scope="scope">
            <div @click="openCode(scope.row)">
              <vue-qr
                slot="reference"
                :text="
                  'https://lineapi.yzsheng.com/pages_commodity?type=existingOrder&id=' +
                    scope.row.wash_Machine_Id +
                    '&machineType=' +
                    scope.row.machine_Type
                "
                :margin="0"
                colorDark="#333"
                colorLight="#fff"
                :size="30"
              ></vue-qr>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.linkStatus === 2">
              <el-button
                @click.native.prevent="openBindStation(scope.row)"
                type="text"
                size="small"
              >
                关联站点
              </el-button>
            </div>
            <el-button
              @click.native.prevent="openEditEquipment(scope.row.id)"
              type="text"
              size="small"
            >
              编辑
            </el-button>
            |
            <el-button
              @click.native.prevent="openDetail(scope.row.id)"
              type="text"
              size="small"
            >
              查看
            </el-button>
            <!--   |
            <el-button
              @click.native.prevent="delEquipment(scope.row.id)"
              type="text"
              size="small"
            >
              删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="block mt-20">
        <el-row justify="center" type="flex">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>
      </div>
    </div>
    <!-- canvas -->
    <vue-canvas-poster
      :widthPixels="300"
      :painting="painting"
      @success="success"
      @fail="fail"
    ></vue-canvas-poster>
    <!-- 设备二维码弹窗 -->
    <el-dialog
      :visible.sync="codeDialogVisible"
      width="500px"
      :before-close="closeCode"
      :show-close="false"
    >
      <div class="code-dialog">
        <el-image :src="codeImg">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
    </el-dialog>

    <!-- 设备信息弹窗 -->
    <equipment-info
      :dialogVisible="infoDialogVisible"
      :params="id"
      @close="closeInfo"
    ></equipment-info>
    <!-- 关联站点弹窗 -->
    <bind-station
      :dialogVisible="bindDialogVisible"
      :params="info"
      @closeBind="closeBind"
      @confirmBind="confirmBind"
    ></bind-station>
    <!-- 新增洗车机弹窗 -->
    <add-equipment
      :dialogVisible="addDialogVisible"
      @closeAdd="closeAdd"
      @confirmAdd="confirmAdd"
    ></add-equipment>
    <!-- 编辑洗车机弹窗 -->
    <edit-equipment
      :dialogVisible="editDialogVisible"
      :params="id"
      @closeEdit="closeEdit"
      @confirmEdit="confirmEdit"
    ></edit-equipment>
  </div>
</template>

<script>
import vueQr from "vue-qr";
import { VueCanvasPoster } from "vue-canvas-poster";
import equipmentInfo from "./equipmentInfo.vue";
import bindStation from "./bindStation.vue";
import addEquipment from "./addEquipment.vue";
import editEquipment from "./editEquipment.vue";
import selectCity from "@/components/selectCity.vue";

export default {
  name: "Equipment",
  data() {
    return {
      params: {
        searchKey: "", //合伙人
        region: ["", "", ""], // 区域
        merchantNo: "", //商户号
        stationName: "", //所属洗车站
        waterState: "", //清水水位
        foamState: "", //泡沫水位
        bindState: "", //关联状态 1：已关联，2：未关联
        workState: "", //设备状态 洗车机状态 0，10，11，12，13
        versionNo: "", //版本号
        reporteState: "", //报修反馈
        bindTime: ["", ""], //绑定时间
        machineType: "" //机器类型
      },
      typeList: [
        { id: "0", name: "自助洗车机" },
        { id: "1", name: "自动洗车机" }
      ],
      waterList: [
        { id: 0, name: "正常" }
        // { id: 1, name: "报警" }
      ],
      linkList: [
        { id: 0, name: "已关联", data: 1 },
        { id: 1, name: "未关联", data: 2 },
        { id: 2, name: "全部", data: "" }
      ],
      workList: [
        { id: 10, name: "正常" },
        { id: 11, name: " 维修中" },
        { id: 12, name: "停机/故障" },
        { id: 13, name: " 暂停服务(商户权限" }
      ],
      versionList: [
        { id: 0, name: "半海V1.0" },
        { id: 1, name: "德翔2.0" }
      ],
      reporteList: [
        { id: 0, name: "无" },
        { id: 1, name: "有" }
      ],
      pageIndex: 1,
      pageSize: 10,
      storetype: "0",
      total: 0,
      totalNumber: 0, //总条数
      infoDialogVisible: false, //洗车机详情弹窗
      bindDialogVisible: false, //关联站点弹窗
      addDialogVisible: false, //新增洗车机弹窗
      editDialogVisible: false, //编辑洗车机弹窗
      codeDialogVisible: false, //设备码弹窗
      qrCode: "", //弹窗二维码内容
      qrMachineCode: "", //弹窗二维码平台编码
      qrWashMachineId: "", //弹窗二维码设备编码
      machineList: [], // 设备列表
      info: {}, //选中的设备
      id: "", //选中的设备id
      painting: {
        width: "400px",
        height: "480px",
        position: "relative",
        top: "0px",
        views: []
      },
      codeImg: "" //二维码图片
    };
  },

  filters: {
    linkStatusFilter(data) {
      return data === 1 ? "已关联" : "未关联";
    },

    statusFilter(status) {
      let tmp = "正常";
      switch (status) {
        case 10:
          tmp = "正常";
          break;
        case 11:
          tmp = " 维修中";
          break;
        case 12:
          tmp = " 停机/故障";
          break;
        case 13:
          tmp = " 暂停服务(商户权限)";
          break;
        default:
          tmp = "正常";
          break;
      }
      return tmp;
    }
  },

  watch: {
    $route(val) {
      if (val.name === "Equipment" && this.$route.params.merchant_num) {
        this.resetForm("filterForm");
        this.params.merchantNo = this.$route.params.merchant_num;
        this.getMachineList();
      }
    }
  },

  mounted() {
    if (this.$route.params.merchant_num) {
      this.params.merchantNo = this.$route.params.merchant_num;
    }
    this.getMachineList();
  },

  methods: {
    // 获取自助洗车机列表
    getMachineList() {
      this.$api.equipments
        .getMachineList({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          base_Region_Id: this.params.region[2],
          base_Region_City_Id: this.params.region[1],
          base_Region_Province_Id: this.params.region[0],
          merchant_Num: this.params.merchantNo,
          station_Name: this.params.stationName,
          linkStatus: this.params.bindState,
          machineStatus: this.params.workState,
          system_Version: this.params.versionNo,
          bindStartTime: this.params.bindTime[0],
          bindEndTime: this.params.bindTime[1],
          searchKey: this.params.searchKey,
          machine_Type: this.params.machineType
        })
        .then(res => {
          this.machineList = res.data.list;
          this.total = res.data.total;
          if (this.total > this.totalNumber) {
            this.totalNumber = res.data.total;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 删除
    delEquipment(id) {
      this.$confirm("确认删除该设备？")
        .then(res => {
          console.log(res);
          this.$api.equipments
            .deleteMachine({
              machine_Id: id
            })
            .then(res => {
              console.log(res);
              this.$message.success("删除成功");
              this.getMachineList();
            })
            .catch(err => {});
        })
        .catch(() => {});
    },

    //查看详情
    openDetail(id) {
      this.id = id;
      this.infoDialogVisible = true;
    },

    // 打开二维码弹窗
    openCode(data) {
      this.codeDialogVisible = true;
      this.qrCode =
        "https://lineapi.yzsheng.com/pages_commodity?type=existingOrder&id=" +
        data.wash_Machine_Id +
        "&machineType=" +
        data.machine_Type;
      this.qrMachineCode = data.machine_Code || "--";
      this.qrWashMachineId = data.wash_Machine_Id;
      this.painting.views = [
        {
          type: "qrcode",
          content:
            "https://lineapi.yzsheng.com/pages_commodity?type=existingOrder&id=" +
            data.wash_Machine_Id +
            "&machineType=" +
            data.machine_Type,
          css: [
            {
              top: "20px",
              left: "20px",
              color: "#000",
              width: "360px",
              height: "360px"
            }
          ]
        },
        {
          type: "text",
          text: "设备编码：" + data.wash_Machine_Id,
          css: [
            {
              top: "400px",
              left: "20px",
              color: "#000",
              fontSize: "24px",
              textAlign: "center",
              width: "360px"
            }
          ]
        },
        {
          type: "text",
          text: "平台编码：" + data.machine_Code,
          css: [
            {
              top: "434px",
              lleft: "20px",
              color: "#000",
              fontSize: "24px",
              textAlign: "center",
              width: "360px"
            }
          ]
        }
      ];
    },
    success(url) {
      this.codeImg = url;
    },
    fail() {
      this.$message.error("生成二维码失败，请稍后重试");
      this.codeDialogVisible = false;
    },

    // 打开编辑洗车机弹窗
    openEditEquipment(id) {
      this.id = id;
      this.editDialogVisible = true;
    },

    // 打开绑定洗车站弹窗
    openBindStation(data) {
      this.info = {
        id: data.id,
        washMachineId: data.wash_Machine_Id, // 设备编号
        machineCode: data.machine_Code //平台编号
      };
      this.bindDialogVisible = true;
    },

    //关闭二维码弹窗
    closeCode() {
      this.codeDialogVisible = false;
    },

    // 关闭洗车机信息弹窗
    closeInfo() {
      this.infoDialogVisible = false;
    },

    //关闭关联站点弹窗
    closeBind() {
      this.bindDialogVisible = false;
    },

    // 关联成功
    confirmBind(e) {
      this.bindDialogVisible = false;
      this.$message({
        message: e,
        type: "success"
      });
      this.getMachineList();
    },

    //关闭添加洗车机弹窗
    closeAdd() {
      this.addDialogVisible = false;
    },

    // 添加成功
    confirmAdd() {
      this.addDialogVisible = false;
      this.$message({
        message: "添加成功",
        type: "success"
      });
      this.getMachineList();
    },

    //关闭编辑车技弹窗
    closeEdit() {
      this.editDialogVisible = false;
    },

    // 修改成功
    confirmEdit(e) {
      this.editDialogVisible = false;
      this.$message({
        message: e,
        type: "success"
      });
      this.getMachineList();
    },

    handleSelectionChange(e) {},

    // 修改每页数据条数
    handleSizeChange(number) {
      this.pageSize = number;
      this.getMachineList();
    },

    // 修改页数
    handleCurrentChange(number) {
      this.pageIndex = number;
      this.getMachineList();
    },

    // 重置筛选条件
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 跳转报修详情
    gotoRepairManagement(id) {
      this.$router.push({
        name: "RepairManagement",
        params: { wash_Machine_Id: id }
      });
    }
  },
  components: {
    equipmentInfo,
    bindStation,
    addEquipment,
    editEquipment,
    selectCity,
    vueQr,
    VueCanvasPoster
  }
};
</script>

<style scoped lang="scss">
.form-top-btn {
  text-align: right;
}
.el-button + .el-button {
  margin-left: 0;
}
.large-input {
  width: 230px;
}
.pr-20 {
  padding-right: 20px;
}
.code-dialog {
  text-align: center;
  width: 500px;
  height: 400px;
  margin-left: -20px;
}
</style>
